<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">商品管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">身份管理</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="Box">
      <div class="table_tab">
        <div class="inquiry">
          <div class="headerbox">
            <div class="header">
              <div class="title_left"></div>
              身份管理
            </div>
          </div>

        </div>
        <div class="inquiryTab">
          <div class="inquiryTab_average">
              <div class="table">
                <el-table
                v-loading="loading"
                  :data="tableData"
                  :header-cell-style="{
                    background: '#f8f8f8',
                    textAlign: 'left',
                  }"
                  style="width: 100%"
                  :toggleRowExpansion="{ expanded: true }"
                  ref="theTable"
                  :row-style="{height: '135px'}"
                >
                  <el-table-column
                    label="名称"
                    min-width="40"
                  >
                    <template slot-scope="props">
                      <el-input size="small" style="width:100%" v-model="props.row.name">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="主图" prop="categoryNo" min-width="50">
                    <template slot-scope="scope">
                      <el-upload
                        v-if="scope.row.mainImage==''"
                          ref="upload"
                          action="#"
                          :limit="1"
                          :on-exceed="test"
                          :before-upload="beforeAvatarUpload"
                          :http-request="(response)=>imgUpload(response, scope.$index,)"
                          :file-list="fileListImg"
                          :show-file-list="false"
                          >
                          <!-- <img v-if="ImgHttps + scope.row.image" :src="ImgHttps + scope.row.image" class="avatar">-->
                          <i style="font-size:18px"  class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                          <div
                          v-else
                            style="
                              display: inline-block;
                              padding: 2px;
                              margin-right: 5px;
                              position: relative;
                            "
                          >
                            <img
                              v-image-preview
                              :src="ImgHttps + scope.row.mainImage"
                              style="width: 90px; height: 90px;padding-top:10px"
                            />
                            <i
                              @click="deleteImg(scope.$index)"
                              class="el-icon-error"
                              style="
                                position: absolute;
                                top: 3px;
                                right: -6px;
                                cursor: pointer;
                              "
                            ></i>
                          </div>

                          </template>
                          <!-- :on-success="(response, file, fileList)=>handleAvatarSuccess(response,file,fileList,scope.$index )" -->

                  </el-table-column>
                  <el-table-column  label="一次性消费金额" prop="amount" min-width="50">
                    <template slot-scope="props">
                      <el-input  style="width:80%" @input="v=> props.row.amount = v.replace(/[^0-9.]/g,'')" size="small"  v-model="props.row.amount">
                      </el-input><span class="marginClass">元</span>
                    </template>
                  </el-table-column>
                  <el-table-column  label="佣金比例" prop="commissionProportion" min-width="50" >
                    <template slot-scope="props">
                      <el-input style="width:80%"  @input="v=> props.row.commissionProportion = v.replace(/[^0-9.]/g,'')" size="small"  v-model="props.row.commissionProportion">
                      </el-input><span class="marginClass">%</span>
                    </template>
                  </el-table-column>
                  <el-table-column   label="复购佣金比例" prop="goodsCommissionProportion" min-width="50">
                    <template slot-scope="props">
                      <el-input style="width:80%"   @input="v=> props.row.goodsCommissionProportion = v.replace(/[^0-9.]/g,'')" size="small"   v-model="props.row.goodsCommissionProportion">
                      </el-input><span class="marginClass">%</span>
                    </template>
                  </el-table-column>
                  <el-table-column   label="积分返现" prop="points" min-width="50">
                    <template slot-scope="props">
                      <el-input style="width:80%"  @input="v=> props.row.points = v.replace(/[^0-9.]/g,'')" size="small"   v-model="props.row.points">
                      </el-input>
                    </template>
                  </el-table-column>
                   <el-table-column   label="商品折扣" prop="vipDiscount" min-width="50">
                    <template slot-scope="props">
                      <el-input style="width:80%" @input="v=> props.row.vipDiscount = v.replace(/[^0-9.]/g,'')" size="small"   v-model="props.row.vipDiscount">
                      </el-input><span class="marginClass">%</span>
                      <div>
                        身份服务商购买商品返佣
                      </div>
                    </template>
                  </el-table-column>
                   <el-table-column   label="同级补贴" prop="sameLevelSubsidy" min-width="50">
                    <template slot-scope="props">
                      <el-input style="width:80%"  @input="v=> props.row.sameLevelSubsidy = v.replace(/[^0-9.]/g,'')" size="small"   v-model="props.row.sameLevelSubsidy">
                      </el-input ><span class="marginClass">%</span>
                      <div>
                      仅享受一级
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column    label="说明" prop="remark" min-width="50">
                    <template slot-scope="props">
                      <el-input style="width:80%;"  size="small" type="textarea"   v-model="props.row.remark">
                      </el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
              <div class="submit">
                <el-button class="submit_btn" type="primary" @click="submit">确 认</el-button>
              </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
  },
  components: {
  },
  data () {
    return {
      loading: false,
      fileListImg: [], // 上传图片
      imageUrl: '',
      input1: '', //
      parArray: [], //
      tableData: [],
      lastTime: 0
      // tableData: [],
    }
  },
  mounted () {
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'GiftManage1'// 菜单管理里面的菜单编码
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    console.log(this.parArray)
    // 权限设定判断
    document.onkeydown = (e) => {
      const key = window.event.keyCode
      if (key == 13) {
        this.searchEvent()
      }
    }
    this.getDataList()
  },
  methods: {
    getDataList () {
      this.loading = true
      const params = {
      }
      this.$api.matrixVipConfig(params).then((res) => {
        if (res.code == 0) {
          this.loading = false
          this.tableData = res.data
        } else {
          this.loading = false
        }
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    },
    deleteImg (index) {
      console.log(index, 'index')
      this.tableData[index].mainImage = ''
    },
    // 上传图片
    test () {
      this.$message.warning(
        '只能上传1张'
      )
    },
    imgUpload (response, index) {
      console.log(response, index, 'fileObj')
      // const length = this.form.fileListImg.length
      const formData = new FormData()
      formData.append('file', response.file)

      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.axios
        .post(
          '/sys/v1/common/upload/files?pathName=internalSystem',
          formData,
          config,
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            console.log(res, 'res')
            // this.imageUrl = res.data.url;
            // const obj = {
            //   img: res.data.url,
            //   creattime: new Date().toLocaleDateString()
            // }
            this.tableData[index].mainImage = res.data.url
          } else {
            this.$message.error(res.message)
          }
        })
    },
    submit () {
      const that = this
      // 获取当前时间的时间戳
      const now = new Date().valueOf()
      // 第一次点击
      if (this.lastTime === 0) {
        that.saveDataList()
        that.lastTime = now
      } else {
        if ((now - that.lastTime) > 2000) {
          // 重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
          that.lastTime = now
          that.saveDataList()

          // 添加自己要调用的方法
        } else {
          console.log('不触发')
        }
      }
    },
    saveDataList () {
      this.loading = true
      const data = {
        vipConfigList: this.tableData
      }
      this.$api.matrixVipConfigSave(data).then((res) => {
        if (res.code === 0) {
          this.loading = false

          this.$message.success('提交成功')
        } else {
          this.loading = false
        }
      }).catch((err) => {
        console.log(err)
      })
      console.log(this.tableData, 'tableData')
    },
    handleAvatarSuccess (res, file, dfdds, index) {
      console.log(res, file, dfdds, index, 'res, file')
      const aaaa = {
        uploadFilePath: file.raw,
        fileName: file.name
      }
      console.log(this.tableData, 'this.tableData')
      this.tableData[index].image.push(aaaa)
    },
    beforeAvatarUpload (file) {
      console.log(file, 'file')
      const isJPGorPNG = file.type === 'image/jpeg'
      // const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      console.log(isJPGorPNG, 'isJPG')
      if (isJPGorPNG === false) {
        this.$message.error('上传图片只能是 JPG 格式！')
        // this.$message.error('上传图片只能是 JPG或PNG 格式')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPGorPNG && isLt2M
    }
  }
}
</script>
<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.member{
  width: 100px;
}
.el-menu-vertical-demo {
  width: 200px;
  overflow-y: scroll;
  height: 700px;
}
.el-menu-input {
  padding: 0 15px;
  background: #fff;
  /deep/ .el-input__inner {
    height: 30px;
    border: 1px solid #eee;
    margin: 10px 0;
  }
}
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.Box {
  display: flex;
  justify-content: flex-start;
  width: 100%;

  .table_tab {
    width: 100%;
    margin-bottom: 50px;
  }
}
.table {
  border-radius: 5px;
  width: 100%;
}
/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

/deep/.el-table__expanded-cell[class*="cell"] {
  padding: 0px 50px;
}
/deep/.el-table td,
.el-table th {
  // text-align: left;
}
.header {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  // padding-bottom: 10px;
}

.inquiry {
  background: #fff;
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
}
.inquiryTab {
  background: #fff;
  padding: 10px 20px 20px 20px;
  border-radius: 5px;
  .inquiryTab_average{
    display: flex;
  }

  .inquiryTab_right{
    width: 18%;
    margin-top: 10px;
    border: 1px solid #e8eaec ;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
  }
  .el-form {
    margin-top: 10px;
  }
  margin-top: 20px;
}

/deep/.el-table__expand-icon > .el-icon {
  color: transparent;
}

.table {
  margin-top: 10px;
  border: 1px solid #e8eaec;
  border-radius: 0;
  /deep/ .el-input--suffix .el-input__inner {
    background: #409eff;
    color: #fff;
    width: 104px;
    box-shadow: none;
  }
  /deep/ .el-button {
    padding: 10px 13px;
  }
}

/deep/.el-table__row:hover {
  color: rgb(45, 125, 223);
}
.headerbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-bottom: 10px;
}
.title_left {
  width: 4px;
  height: 16px;
  background: #4c81eb;
  opacity: 1;
  margin-right: 10px;
}
.tabTitle {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 25px;
  color: #333333;
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 20px;
}
.headerTitle {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  opacity: 1;
  margin-top: 20px;
  margin-bottom: 15px;
}
/deep/.el-form-item__label {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
/deep/.el-table thead {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  opacity: 1;
}

.inputClass{
  width: 80%;
}
.submit{
  display: flex;
  justify-content: center;
}

.marginClass{
  margin-left: 10px;
}
.submit_btn{
  width: 150px;
  margin-top: 20px;
}
:deep(input::-webkit-outer-spin-button),
:deep(input::-webkit-inner-spin-button) {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
:deep(.el-textarea__inner){
  height: 108px;
}
</style>
